<template>
	<div id="loader" class="scene" v-if="isshow">
		<div class="loader-panel">
			<div class="loader-icon"></div>
			<p class="loader-message">正在加载资源 <span id="loader-percent">0</span>%</p>
		</div>
	</div>
</template>
<script>
import Loader from './loader.js'
export default {
  data() {
    return {
      isshow : true,
    }
  },
  mounted() {
    let list = [
      'page1-bg.png',
      'bg.jpg',
      'perons-move.png',
      'btn.png',
      'cj-btn.png',
      'dialog-bg.png',
      'cj-btn-2.png',
      'next-btn.png',
      'result-btn-2.png',
      'submit-btn.png',
      'btn-detail.png',
      'q-bg.png',
      'logo.png',
      'music-off.png',
      'music.png',
      'lock.png',
      'ok.png',
      'wrong.png',
      'invite-btn.png',
      'dialog-bg-3.png',
      'cj-out.png',
      'back.png',
      'q7/1.png',
      'cj-dialog.png'
    ];
    list.forEach(res => {
      let domain = `https://s.hangjiayun.com/zhuanti/question/images/`;
      Loader.Add(domain + res);
    })
    Loader.Run(
      function(percent, total, complete)
      {
        console.log('元素下载成功', percent, total, complete);
        Loader.Run._Percent = Loader.Run._Percent || document.getElementById('loader-percent');
        Loader.Run._Percent.innerHTML = percent;
      },
      () => 
      {
        console.log(`所有元素下载成功`);
        this.isshow = false;
        this.$emit('ready');
      }
    );
  },
  methods: {
  }
}
</script>
